<template>
  <div>
    <!-- 搜索框 -->
    <div class="search">
      <van-row>
        <van-col span="2">
          <van-button
            class="left_btn"
            @click="left_btn"
          >
            <van-icon name="arrow-left" />
          </van-button>
        </van-col>
        <van-col span="21">
          <van-search
            v-model="huati"
            placeholder="搜索"
          />
        </van-col>
      </van-row>
    </div>
    <!-- 标签栏 -->
    <div>
      <van-tabs
        v-model="active"
        swipeable
        title-active-color="#00994d"
        color="#00994d"
        line-width="10px"
      >
        <van-tab title="最近">
          <div class="select_box">
            <div class="content">
              <p>11123</p>
              <p>11123</p>
              <p>11123</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="话题">
          <div class="select_box">
            <div class="content">
              <van-row
                v-for="item in toptic"
                :key="item.id"
                @click="select(item.Productid)"
              >
                <van-col span="4">
                  <van-image
                    :src="'apis/kuan_api/ProductImg/'+item.ProductImg"
                    fit="contain"
                  />
                </van-col>
                <van-col span="12">
                  <p style="margin:10px">
                    <van-tag
                      type="success "
                      plain
                    >{{item.categoryname}}</van-tag> <span style="font-weight:500">{{item.ProductName}}</span>
                  </p>
                  <p style="margin:10px">
                    9272关注 1.2万讨论
                  </p>
                </van-col>
              </van-row>
            </div>
          </div>
        </van-tab>
        <van-tab title="数码">数码
        </van-tab>
        <van-tab title="应用">应用
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "selectmodule",
  data() {
    return {
      huati: "",
      active: 0,
      toptic: [],
    };
  },
  methods: {
    left_btn() {
      window.history.go(-1);
    },
    // 获取话题
    gettoptic() {
      this.axios.post("apiskuan_api/getTopic.php").then((res) => {
        console.log(res.data.toptic);
        this.toptic = res.data.toptic;
      });
    },
    select(id) {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          productid: id,
        })
        .then((res) => {
          console.log(res.data.product[0]);
          this.$router.push({
            path: "/sendmessage",
            query: { huati: res.data.product[0] },
          });
        });
    },
  },
  created() {
    this.gettoptic();
  },
};
</script>

<style scoped>
.left_btn {
  border: 0;
  padding-top: 12px;
  font-size: 15px;
}
.select_box {
  background-color: #f2f1f6;
  padding: 10px 0px 10px 0px;
}
.content {
  width: 90%;
  margin: 0 auto;
  background-color: white;
  border-radius: 5px;
  padding: 5px 0px 15px 5px;
}
</style>